<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帖子列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        *{
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
        @media screen and (max-height: 1000px) and (min-width: 992px){
            .max_height{
                height: 700px !important;
            }
            .contentText{
                -webkit-line-clamp:10 !important;
            }
        }

        @media screen and (min-height: 1200px) and (min-width: 992px){
            .max_height{
                height: 1000px !important;
            }
            .contentText{
                -webkit-line-clamp:12 !important;
            }
        }
        @media screen and (max-height: 800px) and (min-width: 992px){
            .max_height{
                height: 450px !important;
            }
            .contentText{
                -webkit-line-clamp:6 !important;
            }
        }
        .max_height{
            height: 500px;
            margin-bottom: 40px;
        }
        html,body,.ibox,.ibox-content,.row,.col*{
            height: 100%;
            width: 100%;
        }
        p,span,div{
            color: #8C8C8C;
        }
        .contentText{
            -webkit-line-clamp:6;
            overflow:hidden; text-overflow:ellipsis;
            display:-webkit-box; -webkit-box-orient:vertical;
        }
        input[type=radio]{
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            position: relative;
            display: inline-block;
            vertical-align: top;
            width: 20px;
            height: 20px;
            border: 1px solid #1890FF;
            outline: none;
            cursor: pointer;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
        }

        input[type=radio]:after{
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            display: block;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background: #1890FF;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
            -webkit-transition : all ease-in-out 300ms;
            -moz-transition : all ease-in-out 300ms;
            transition : all ease-in-out 300ms;
        }
        input[type=radio]:checked:after{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
        input,button,select,textarea{outline:none !important;}
        .alert p,.alert_bottom_body{
            color: #FFFFFF;
        }
        .alert div{
            padding: 6px 10px 0 10px;
            border-bottom: 1px solid rgba(255,255,255,0.2);
            margin-bottom: 10px;
        }
        .alert .alert_key{
            font-size: 14px;
        }
        .alert .alert_value{
            font-size: 12px;
        }
        .video_frame{
            position:absolute; left:20px;top: 4px;padding: 4px 6px;text-align: center;font-size: 12px;
            border-radius: 50px;background: #373737;z-index: 1000;color: #FFFFFF;
        }
        .tips{
            position:absolute; right: 20px;top: 4px;padding: 4px 6px;width: 20px;height: 20px;text-align: center;line-height:15px;
            border-radius: 50px;background: #373737;z-index: 1000;color: #FFFFFF;
        }
        .alert_top{
            display: none;background: rgba(0,0,0,0.8);transform:rotate(45deg);position:absolute; right: 5px;top: 22px;width: 10px;height: 10px;
        }
        .alert{
            text-align: left;position:absolute; right: 0;top: 26px;background: rgba(0,0,0,0.8);border-radius: 5px;padding: 10px 0;display: none;
            max-width: 200px;
        }
        video{
            max-height: 60%;height: 60%;min-height: 60%;
        }
        .check{
            font-size: 12px;margin: 0;line-height: 30px;border: 1px solid #E9E9E9;background: #f7f9fa;border-top: none;
        }
        .check div{
            color: rgba(0,0,0,.6);
        }
        .content{
            background: #ffffff;max-height: 35%;height: 35%;min-height: 35%;padding: 10px;width: 100%;border: 1px solid #E9E9E9;
            position: relative;
        }
        .tips_bottom{
            position:absolute;right: 20px;bottom: 0px;
            background: #ffffff;
        }
        .tips_bottom>span{
            color: #1890FF;
        }
        .alert_bottom{
            display: none;background: rgba(0,0,0,0.8);transform:rotate(45deg);position:absolute; right: 5px;bottom: 22px;width: 10px;height: 10px;
        }
        .alert_bottom_body{
            text-align: left;position:absolute; right: -34px;bottom: 26px;background: rgba(0,0,0,0.8);border-radius: 5px;padding: 10px;display: none;width: 200px;
        }
        .size_14{
            height: 220px !important;
        }
        .size_15{
            height: 320px !important;
        }
        .size_20{
            height: 450px !important;
        }
        .contentText_14{
            -webkit-line-clamp : 1 !important;
        }
        .contentText_15{
            -webkit-line-clamp : 2 !important;
        }
        .contentText_20{
            -webkit-line-clamp : 6 !important;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-content" style="background: #f0f2f5;">
                    <div class="row row-lg list">
                        <div class="col-md-3 max_height hide">
                            <span class="video_frame hide">查看帧</span>
                            <span class="tips">i
                                <i class="alert_top"></i>
                                <div  class="alert">
                                    <div>
                                        <p class="alert_key">用户名称</p>
                                        <p class="alert_value user_name"></p>
                                    </div>
                                    <div>
                                        <p class="alert_key">用户ID</p>
                                        <p class="alert_value user_id"></p>
                                    </div>
                                    <div>
                                        <p class="alert_key">帖子ID</p>
                                        <p class="alert_value content_id"></p>
                                    </div>
                                    <div>
                                        <p class="alert_key">上传时间</p>
                                        <p class="alert_value upload_time"></p>
                                    </div>
                                    <div>
                                        <p class="alert_key">地址</p>
                                        <p class="alert_value address" style="overflow-wrap: break-word;"></p>
                                    </div>
                                </div>
                            </span>
                            <video class="hide"
                                    src=""
                                    poster=""
                                    controls autoplay >
                            </video>
                            <div class="hide pic" style="max-height: 60%;height: 60%;min-height: 60%;width: 100%;margin-bottom: 6px;background-size: cover;">
                            </div>
                            <div class="content">
                                <i class="nic_pic" style="display: inline-block;vertical-align: top;
                                border-radius: 50px;width: 40px;height: 40px;background-size: cover;"></i>
                                <p class="user_name" onclick="blocked(this)" style="display: inline-block;margin-left: 6px;line-height: 40px;cursor: pointer;"></p>
                                <div class="contentText" style="font-size: 12px;position:relative;">

                                </div>
                                <span class="tips_bottom" check="1">
                                        <span>全文</span>
                                        <i class="alert_bottom"></i>
                                        <div  class="alert_bottom_body">

                                        </div>
                                    </span>
                            </div>
                            <div class="row check">
                                <div class="col-md-6">
                                    <input class="input_check" type="radio" value="1" checked /> 通过
                                </div>
                                <div class="col-md-6">
                                    <input class="input_check" type="radio" value="2"/> 不通过
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="position:relative;margin-top: 40px;">
                        <div style="position:absolute;left: 0;top: 0;cursor: pointer;" class="change_type">
                            <i style="display: inline-block;vertical-align: middle;
                            width: 30px;height: 30px;background: url(${ctx!}/assets/img/switch_icon_2times.png) center center no-repeat;background-size: cover;"></i>
                            切换模式
                        </div>
                        <div style="margin: 20px auto;width: 20%;">
                          <button type="button" id="button_id" onclick="submit();" class="btn btn-info btn-lg" style="padding: 10px 80px;width: 100%;">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="blocked" style="z-index: 9;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);display: none;
position: fixed;top: 0;bottom: 0;left: 0;right: 0;">
    <div style="background-color: #ffffff;width: 60%;min-height: 100px;position: relative;top: 10%;margin: 0 auto;border-radius: 5px;padding: 3% 1%;color:rgb(51,51,51);">
        <div>
            <i class="nic_pic" style="display: inline-block;width: 70px;height: 70px;
            background: url(http://imgtu.5011.net/uploads/content/20170213/3890561486958361.jpg) no-repeat;
            background-size: cover;vertical-align: top;"></i>
            <div style="display: inline-block;vertical-align: top;width: 50%;overflow: hidden;">
                <span>用户名称：<span class="user_name"></span></span><br>
                <span>用户ID：<span class="user_id"></span></span><br>
                <span>个性签名：<span class="user_sign"></span></span><br>
                <span>注册时间：<span class="reg_time"></span></span>
            </div>
            <div style="display: inline-block;margin-left: 50px;line-height: 34px;">
                <p style="color: #333333;">发帖量：<span class="content_count"></span></p>
                <p style="margin-bottom: 0;color: #333333;">通过量：<span class="content_pass_count"></span></p>
            </div>
        </div>
        <div style="margin: 40px 0;">
            <div style="display: inline-block;width: 50%;text-align: center;">
                <p style="color: #333333;">用户状态</p>
                <p style="color: red;" class="blocked_type">永久全部封禁</p>
            </div>
            <div style="display: inline-block;width: 40%;">
                <div>
                    <div style="color: #333333;display: inline-block;">封禁：</div>
                    <div style="display: inline-block;">
                        <select class="form-control" style="padding: 0;" name="blockedType">
                            <option value="1">全部封禁</option>
                        </select>
                    </div>
                </div>
                <div style="margin-top: 10px;">
                    <div style="color: #333333;display: inline-block;">时间：</div>
                    <div style="display: inline-block;">
                        <select class="form-control" style="padding: 0;" name="blockedTimeType">
                            <option value="2">一周</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="res_message hide" style="text-align: center;">提交成功</div>
        <div style="margin: 20px auto;width: 50%;">
            <button type="button" onclick="javascript:$('#blocked').hide();" class="btn btn-default" style="width: 40%;margin-right: 18%;">关闭</button>
            <button type="button" onclick="blocked_sub(this);" class="btn btn-info sub" style="width: 40%;">提交</button>
        </div>
    </div>
</div>
<div id="popEp" style="z-index: 9;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);display: none;position: absolute;top: 0;">
    <div style="background-color: #ffffff;width: 45%;min-height: 100px;position: relative;top: 10%;margin: 0 auto;border-radius: 5px;padding: 50px;color:rgb(51,51,51);">
        <p style="text-align: center;"><b>提醒</b></p>
        <p style="margin-top: 1.3em;" class="text-center">提交中，请稍后...</p>
    </div>
</div>
<div id="alert_pic" style="z-index: 9;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);display: none;position: absolute;top:0;bottom:0;left:0;right:0;" onclick="javascript:$('#alert_pic').css('display','none');">
        <div style="background-color: #ffffff;width: 45%;min-height: 100px;position: relative;top: 10%;margin: 0 auto;border-radius: 5px;padding: 1%;color:rgb(51,51,51);">
            <img src="http://imgtu.5011.net/uploads/content/20170213/3890561486958361.jpg" alt="" width="100%">
        </div>
    </div>
</body>
<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script> 
<script type="text/javascript">
    $(function () {
        var size = 4;
        var clone_obj = $('.max_height').clone().removeClass('hide');

        blocked = function(obj){
            $('.sub').attr('disabled',false);
            var user_id = $(obj).attr('data-user');
            var content_id = $(obj).attr('data-content');
            if (user_id == undefined || user_id == null) return false;
            //console.log( user_id + 'dsds');
            $.ajax({
                url: '/examine/dy/user/blocked/info',
                method: 'GET',
                data:  { publisherDyId : user_id },
                dataType: "json",
                beforeSend: function () {
                    $("#popEp .text-center").text('获取用户信息中，请稍后...');
                    $("#popEp").fadeIn();
                },
                success: function (data) {
                $(".res_message").addClass('hide')
                    if (data.code == 0){
                        $("#popEp .text-center").text('获取成功!,页面正在渲染...');
                        $('#blocked').find('.nic_pic').css({'background':'url(' + data.data.headPortraitUrl + ') center center no-repeat','background-size':'cover'});
                        $('#blocked').find('.user_name').text(data.data.nickName);
                        $('#blocked').find('.user_id').text(data.data.publisherDyId);
                        $('#blocked').find('.user_sign').text(data.data.signature);
                        $('#blocked').find('.reg_time').text(data.data.createDate);
                        $('#blocked').find('.content_count').text(data.data.contentCount);
                        $('#blocked').find('.content_pass_count').text(data.data.contentPassCount);
                        var type = data.data.blockedType;
                        if (type == '' || type == '0') $('#blocked').find('.blocked_type').text('正常');
                        else if(type == '1')    $('#blocked').find('.blocked_type').text('全部封禁');
                        else if(type == '2')    $('#blocked').find('.blocked_type').text('封禁资料');
                        else if(type == '3')    $('#blocked').find('.blocked_type').text('封禁评论');
                        else if(type == '4')    $('#blocked').find('.blocked_type').text('封禁投稿');
                        $('#blocked').find('.sub').attr('data-user',user_id).attr('data-content',content_id);
                        $('#blocked').fadeIn();
                        $("#popEp").hide();
                        return true;
                    } else {
                        $('#popEp .text-center').text('获取失败，请稍后再试！');
                        setTimeout(function () {
                            $('#popEp').hide();
                        }, 1500);
                    }
                    return false;
                },
                error: function (xhr, type) {
                    if (xhr.status == 0) {
                        $("#popEp .text-center").text('请检查网络状态');
                    } else {
                        $("#popEp .text-center").text('系统繁忙, 稍候再试');
                    }
                    setTimeout(function () { $('#popEp').fadeOut(100); }, 500);
                    return false;
                }
            })
        };
        blocked_sub = function (obj) {
            var user_id = $(obj).attr('data-user');
            var content_id = $(obj).attr('data-content');
            var blockedType = $('select[name="blockedType"]').val();
            var blockedTimeType = $('select[name="blockedTimeType"]').val();

            if (user_id == undefined || user_id == null) return false;
            //console.log('1234654');
            var payload = {
                publisherDyId : user_id,
                dyContentId : content_id,
                blockedType : blockedType,
                blockedTimeType : blockedTimeType
            };
            //console.log(JSON.stringify(payload));
            $.ajax({
                url: '/examine/dy/user/blocked/info/update',
                headers: {'Content-type': 'application/json;charset=UTF-8'},
                method: 'POST',
                data: JSON.stringify(payload),
                dataType: "json",
                beforeSend: function () {
                     $(obj).attr('disabled',true);
                    $(".res_message").removeClass('hide').css('color','#333333').text('提交中，请稍后...');
                },
                success: function (data) {
                    if (data.code == 0) {
                        $(".res_message").removeClass('hide').css('color','green').text('提交成功');
                        $('#blocked').hide();
                        setTimeout(function () { getContents(1, size);}, 500);
                        return true;
                    }else{
                        $(".res_message").removeClass('hide').css('color','red').text('提交失败');
                    }
                    return false;
                },
                error: function (xhr, type) {
                $(obj).attr('disabled',false);
                    if (xhr.status == 0) {
                        $(".res_message").removeClass('hide').css('color','red').text('请检查网络状态');
                    } else {
                        $(".res_message").removeClass('hide').css('color','red').text('系统繁忙, 稍候再试');
                    }
                    return false;
                }
            })
        }
        getContents = function (page, size) {
            $.ajax({
                url: '/examine/content/list',
                method: 'GET',
                data: {
                    pageSize: size,
                    pageNumber: page,
                    sortOrder: 'desc'
                },
                dataType: "json",
                beforeSend: function () {
                    $("#popEp").fadeIn();
                },
                success: function (data) {
                    $('.max_height').remove();
                    if (data.content.length != 0){
                        var height = document.documentElement.clientHeight -200;
                        if (data.content.length > 4) {
                            height = document.documentElement.clientHeight /2 -100;
                            if (height < 300){
                                clone_obj.find('.contentText').addClass('contentText_14');
                            } else if(height > 300 && height < 500){
                                clone_obj.find('.contentText').addClass('contentText_15');
                            }else{
                                clone_obj.find('.contentText').addClass('contentText_20');
                            }
                        }else{
                            clone_obj.removeClass('size_14').removeClass('size_15').removeClass('size_20');
                            clone_obj.find('.contentText').removeClass('contentText_14').removeClass('contentText_15').removeClass('contentText_20');
                        }
                      $("#button_id").attr('disabled',false);
                        for (var i = 0;i<data.content.length;i++){
                            var tmp = clone_obj.clone();
                            tmp.find('.user_name').attr('data-user',data.content[i].publisherDyId).attr('data-content',data.content[i].dyContentId).text(data.content[i].nickName);
                            tmp.find('.user_id').text(data.content[i].publisherDyId);
                            tmp.find('.content_id').text(data.content[i].dyContentId);
                            tmp.find('.upload_time').text(data.content[i].uploadDate);
                            tmp.find('.address').text(data.content[i].contentUrl);
                            if (data.content[i].contentType == '4'){
                                tmp.find('video_frame').removeClass('hide');
                                tmp.find('video').removeClass('hide')
                                    .attr('src',data.content[i].contentUrl)
                                    .attr('poster',data.content[i].videoDisplay);
                            }else if (data.content[i].contentType == '3'){
                                tmp.find('.pic').removeClass('hide').attr('data',data.content[i].contentUrl).css({'background':'url('+  data.content[i].contentUrl +') center center no-repeat','background-size':'cover'});
                            }else{
                                tmp.find('.content').css({'height':'96%','max-height': '96%'});
                            }
                            if(data.content[i].headPortraitUrl !=null&&data.content[i].headPortraitUrl != '' && data.content[i].headPortraitUrl!= undefined){
                               tmp.find('.nic_pic').css({'background':'url('+ data.content[i].headPortraitUrl +') center center no-repeat','background-size':'cover'});
                            }else{
                               tmp.find('.nic_pic').css({'background':'url(${ctx!}/assets/img/user_pic.png) center center no-repeat','background-size':'cover'});
                            }
                            tmp.find('.contentText').text(data.content[i].contentText);
                            tmp.find('.alert_bottom_body').text(data.content[i].contentText);
                            tmp.find('.input_check').attr('name',data.content[i].id);
                            $('.list').append(tmp);
                            $('.max_height')[i].style.setProperty('height', height + 'px', 'important');
                        }
                        	$("#popEp").hide();
                    }else{
                       $("#button_id").attr('disabled',true);
                       $('.max_height').empty();
                        $("#popEp b").text('');
                        $("#popEp .text-center").text('暂无帖子审核，正在分配');
                        $("#popEp").fadeIn();
                    }
                },
                error: function (xhr, type) {
                    $("#button_id").attr('disabled',true);
                    if (xhr.status == 0) {
                        $("#popEp .text-center").text('请检查网络状态');
                    } else {
                        $("#popEp .text-center").text('系统繁忙, 稍候再试');
                    }
                    setTimeout(function () { $('#popEp').fadeOut(100); }, 500);
                    return false;
                }
            })
        }

        $(document).on("click",'.change_type',function(){
            if(size == 4) size = 8;
            else size = 4;
            getContents(1, size);
        });
        $(document).on("mouseover",'.tips',function(){
            $(this).children('*').show();
        });
        $(document).on("mouseout",'.tips',function(){
            $(this).children('*').hide()
        });
        $(document).on("click",'.tips_bottom',function(){
            //console.log('jinl');
            if ($(this).attr('check') == 1) {
                $(this).attr('check','0');
                $(this).children('span').text('收起');
                $(this).children('i,div').show();
            }else{
                $(this).attr('check','1');
                $(this).children('span').text('全文');
                $(this).children('i,div').hide();
            }
        });
         $(document).on('click','.pic',function () {
            var pic_url = $(this).attr('data');
            $('#alert_pic').find('img').attr('src',pic_url);
            $('#alert_pic').fadeIn();
        })
        submit = function () {
            // $("#popEp").fadeIn();
            var payload = [];
            var checkArr = $('input:checked');
            for (var i = 0;i<checkArr.length;i++) {
                var obj = {
                    id : checkArr[i].name,
                    exResult : checkArr[i].value
                }
                 if (obj.id != undefined && obj.id != null && obj.id != ''){
                    payload.push(obj);
                }
            }
            if(payload.length!=0){
                $("#button_id").attr('disabled',true);
	            $.ajax({
	                url: '/examine/content/update',
	                headers: { 'Content-type': 'application/json;charset=UTF-8' },
	                method: 'POST',
	                data:  JSON.stringify(payload),
	                dataType: "json",
	                beforeSend: function () {
	                    $("#popEp .text-center").text('提交中，请稍后...');
	                    $("#popEp").fadeIn();
	                },
	                success: function (data) {
	                    $("#popEp .text-center").text('提交成功!,页面跳转中...');
	                    setTimeout(function () { getContents(1, size);}, 500);
	                    return true;
	                },
	                error: function (xhr, type) {
	                    if (xhr.status == 0) {
	                        $("#popEp .text-center").text('请检查网络状态');
	                    } else {
	                        $("#popEp .text-center").text('系统繁忙, 稍候再试');
	                    }
	                    setTimeout(function () { $('#popEp').fadeOut(100); }, 500);
	                    return false;
	                }
	            })
            }
        }
        getContents(1, size);
    })
</script>
</html>